<template>
  <div class="header">
    <div class="header-top">
      <ul class="nav-left">
        <li>
          <a href="#"
            ><i class="el-icon-mobile-phone" style="color: red"></i>手机阿里</a
          >
        </li>
        <li><a href="#">欢迎来到阿里巴巴</a></li>
        <li>
          <a href="#"
            ><i class="el-icon-mobile" style="color: red"></i>请登录</a
          >
        </li>
        <li><a href="#">免费注册</a></li>
      </ul>
      <ul class="nav-right">
        <li><router-link to="/home">1688首页</router-link></li>
        <li><a href="#">我的阿里</a></li>
        <li @click="toPurchaseOrder">
          <a
            >进货单<i class="el-icon-shopping-cart-full"></i
            ><i class="el-icon-arrow-down"></i
          ></a>
        </li>
        <li>
          <a href="#">我的收藏<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">诚信通<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">实力商家<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">超级工厂<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">工业品牌<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">我是供应商<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">客服中心<i class="el-icon-arrow-down"></i></a>
        </li>
        <li>
          <a href="#">网站导航<i class="el-icon-arrow-down"></i></a>
        </li>
        <li id="lastLi"><a href="#">网站无障碍</a></li>
      </ul>
    </div>
    <div class="header-body"></div>
    <div class="header-bottom">
      <div class="img">
        <a href="#"><img src="./images/header.png" /></a>
      </div>
      <div class="search">
        <div class="search-num">
          <img
            src="https://img.alicdn.com/imgextra/i1/O1CN01dUHefe1TNxqfFY58z_!!6000000002371-55-tps-404-83.svg"
            alt=""
          />
        </div>
        <div class="search-inp">
          <input type="text" v-model="keyWord" />
          <span @click="goSearch">搜索</span>
        </div>
        <div class="search-code">
          <img
            src="https://img.alicdn.com/imgextra/i4/O1CN014NHXki1gFnk2URMPw_!!6000000004113-2-tps-256-256.png"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WHeader",
  data() {
    return {
      keyWord: "",
    };
  },
  methods: {
    // 点击跳转进货单函数
    toPurchaseOrder() {
      this.$router.push({
        name: "purchaseOrder",
      });
    },
    // 点击搜索按钮携带参数跳转搜索页面
    goSearch() {
      this.$router.push({
        name: "product",
        query: this.keyWord,
      });
      this.keyWord = "";
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 1200px;
  margin: 0 auto;
}
// 头部上半部分
.header-top {
  height: 30px;
  line-height: 30px;
}
.header-top ul li a {
  padding: 0 6px;
  border-right: 1px solid rgb(218, 216, 216);
}
.nav-left {
  float: left;
}
.nav-left li {
  float: left;
}
.nav-right {
  float: right;
  margin-left: 30px;
}
.nav-right li {
  float: left;
}
#lastLi a {
  padding-right: 0;
  border-right: none;
}
// 头部中间
.header-body {
  height: 2px;
  background-color: rgb(225, 219, 219);
}
// 头部下半部分
.search {
  margin-top: 20px;
  height: 88px;
}
.search-num {
  float: left;
}
.search-num img {
  width: 213px;
  height: 40px;
}
.search-inp {
  float: left;
  margin: 0 20px;
}
.search-inp input {
  width: 726px;
  height: 36px;
  border: 2px solid #ff6000;
  border-right: none;
  outline: none;
}
.search-inp span {
  display: inline-block;
  line-height: 40px;
  text-align: center;
  height: 40px;
  width: 118px;
  background-color: #ff6000;
  color: #fff;
}
.search-code {
  float: right;
}
.search-code img {
  width: 44px;
  height: 44px;
  .header {
    background-color: #bfa;
  }
}
</style>
